<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            background: greenyellow;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background: red;
            margin: 50px;
            float: left;
        }
    </style>

    <script src="./jquery.min.3.4.1.js"></script>
    <script>
        $(function () {

            /*把li的父结点设置为skyblue*/
            $('button:eq(0)').click(function () {
                // parents 祖元素节点
                // $('li').parents().css({
                //     backgroundColor: 'skyblue'
                // })

                // parent 父元素节点 （亲爸爸）
                $('li').parent().css({
                    background: 'skyblue'
                })
            });

            /*把所的孩子设置为blue*/
            $('button:eq(1)').click(function () {
                // .children() 所有的子元素

                $('.box1').children().css({
                    backgroundColor: 'blue'
                })
            });

            /*把所有的兄弟节点设置为blue*/
            $('button:eq(2)').click(function () {
                // .siblings() 选中所有 兄弟节点不包含自己
                $('.liItem').siblings().css({
                    backgroundColor: 'blue'
                })

            });



        });



    </script>
</head>

<body>
    <button>选择li的父节点</button>
    <button>选择box1的所有子元素</button>
    <button>选择liItem的所有兄弟元素</button>

    <div class="box1">

        <div class="box2">
            <ul class="ulItem">
                <li>我是一个li1</li>
                <li class="liItem">我是一个li2</li>
                <li>我是一个li3</li>
                <li>我是一个li4</li>
                <li>我是一个li5</li>
                <li>我是一个li6</li>
                <li>我是一个li7</li>
                <li>我是一个li8</li>
            </ul>
        </div>
    </div>

</body>

</html>